<!DOCTYPE html>
<html lang="en-US" class="no-js jetpack-lazy-images-js-enabled">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Personal Blog By Alen Andry</title>

    <meta name="application-name" content="alenblog">

    <link rel="stylesheet" href="./idex_files/ais8cmj.css">

    <link rel="stylesheet" href="./idex_files/style.css">

    <link rel="shortcut icon" href="./google.svg">


    <!-- This site is optimized with the Yoast SEO Premium plugin v14.9 - https://yoast.com/wordpress/plugins/seo/ -->
    <meta name="description" content="A live podcast about front end web design and UX.">
    <meta name="robots" content="index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1">
    <link rel="canonical" href="https://shoptalkshow.com/">
    <link rel="next" href="https://shoptalkshow.com/page/2/">
    <meta property="og:locale" content="en_US">
    <meta property="og:type" content="website">
    <meta property="og:title" content="ShopTalk Show">
    <meta property="og:description" content="A podcast about building websites.">
    <meta property="og:url" content="https://shoptalkshow.com/">
    <meta property="og:site_name" content="ShopTalk">
    <meta property="og:image"
        content="https://i2.wp.com/shoptalkshow.com/wp-content/uploads/2020/03/default-graphic.png?fit=552%2C552&amp;ssl=1">
    <meta property="og:image:width" content="552">
    <meta property="og:image:height" content="552">
    <meta name="twitter:card" content="summary">
    <meta name="twitter:site" content="@shoptalkshow">
    <script type="text/javascript" async="" src="./idex_files/ga.js"></script>
    <script type="application/ld+json"
        class="yoast-schema-graph">{"@context":"https://schema.org","@graph":[{"@type":"WebSite","@id":"https://shoptalkshow.com/#website","url":"https://shoptalkshow.com/","name":"ShopTalk","description":"A live podcast about front end web design and UX.","potentialAction":[{"@type":"SearchAction","target":"https://shoptalkshow.com/?s={search_term_string}","query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"CollectionPage","@id":"https://shoptalkshow.com/#webpage","url":"https://shoptalkshow.com/","name":"ShopTalk: A Web Design and Development Podcast with Chris Coyier and Dave Rupert","isPartOf":{"@id":"https://shoptalkshow.com/#website"},"description":"A live podcast about front end web design and UX.","inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https://shoptalkshow.com/"]}]}]}</script>
    <!-- / Yoast SEO Premium plugin. -->


    <link rel="dns-prefetch" href="https://s.w.org/">
    <link rel="dns-prefetch" href="https://c0.wp.com/">
    <link rel="dns-prefetch" href="https://i0.wp.com/">
    <link rel="dns-prefetch" href="https://i1.wp.com/">
    <link rel="dns-prefetch" href="https://i2.wp.com/">
    <script type="text/javascript">
        window._wpemojiSettings = { "baseUrl": "https:\/\/s.w.org\/images\/core\/emoji\/13.0.0\/72x72\/", "ext": ".png", "svgUrl": "https:\/\/s.w.org\/images\/core\/emoji\/13.0.0\/svg\/", "svgExt": ".svg", "source": { "concatemoji": "https:\/\/shoptalkshow.com\/wp-includes\/js\/wp-emoji-release.min.js?ver=5.5.2" } };
        !function (e, a, t) { var r, n, o, i, p = a.createElement("canvas"), s = p.getContext && p.getContext("2d"); function c(e, t) { var a = String.fromCharCode; s.clearRect(0, 0, p.width, p.height), s.fillText(a.apply(this, e), 0, 0); var r = p.toDataURL(); return s.clearRect(0, 0, p.width, p.height), s.fillText(a.apply(this, t), 0, 0), r === p.toDataURL() } function l(e) { if (!s || !s.fillText) return !1; switch (s.textBaseline = "top", s.font = "600 32px Arial", e) { case "flag": return !c([127987, 65039, 8205, 9895, 65039], [127987, 65039, 8203, 9895, 65039]) && (!c([55356, 56826, 55356, 56819], [55356, 56826, 8203, 55356, 56819]) && !c([55356, 57332, 56128, 56423, 56128, 56418, 56128, 56421, 56128, 56430, 56128, 56423, 56128, 56447], [55356, 57332, 8203, 56128, 56423, 8203, 56128, 56418, 8203, 56128, 56421, 8203, 56128, 56430, 8203, 56128, 56423, 8203, 56128, 56447])); case "emoji": return !c([55357, 56424, 8205, 55356, 57212], [55357, 56424, 8203, 55356, 57212]) }return !1 } function d(e) { var t = a.createElement("script"); t.src = e, t.defer = t.type = "text/javascript", a.getElementsByTagName("head")[0].appendChild(t) } for (i = Array("flag", "emoji"), t.supports = { everything: !0, everythingExceptFlag: !0 }, o = 0; o < i.length; o++)t.supports[i[o]] = l(i[o]), t.supports.everything = t.supports.everything && t.supports[i[o]], "flag" !== i[o] && (t.supports.everythingExceptFlag = t.supports.everythingExceptFlag && t.supports[i[o]]); t.supports.everythingExceptFlag = t.supports.everythingExceptFlag && !t.supports.flag, t.DOMReady = !1, t.readyCallback = function () { t.DOMReady = !0 }, t.supports.everything || (n = function () { t.readyCallback() }, a.addEventListener ? (a.addEventListener("DOMContentLoaded", n, !1), e.addEventListener("load", n, !1)) : (e.attachEvent("onload", n), a.attachEvent("onreadystatechange", function () { "complete" === a.readyState && t.readyCallback() })), (r = t.source || {}).concatemoji ? d(r.concatemoji) : r.wpemoji && r.twemoji && (d(r.twemoji), d(r.wpemoji))) }(window, document, window._wpemojiSettings);
    </script>
    <script src="./idex_files/wp-emoji-release.min.js" type="text/javascript" defer=""></script>
    <style type="text/css">
        .word pre {
            font-size: 2.5rem;
            padding: auto, 10;
            margin-top: 0.5rem;
            margin-left: 0.5rem;
        }

        img.wp-smiley,
        img.emoji {
            display: inline !important;
            border: none !important;
            box-shadow: none !important;
            height: 1em !important;
            width: 1em !important;
            margin: 0 .07em !important;
            vertical-align: -0.1em !important;
            background: none !important;
            padding: 0 !important;
        }
    </style>
    <link rel="stylesheet" id="wp-block-library-css" href="./idex_files/style.min.css" type="text/css" media="all">
    <link rel="stylesheet" href="./idex_files/code.css">
    <style id="wp-block-library-inline-css" type="text/css">
        .has-text-align-justify {
            text-align: justify;
        }
    </style>
    <link rel="stylesheet" id="jetpack_css-css" href="./idex_files/jetpack.css" type="text/css" media="all">
    <link rel="https://api.w.org/" href="https://shoptalkshow.com/wp-json/">
    <link rel="EditURI" type="application/rsd+xml" title="RSD" href="https://shoptalkshow.com/xmlrpc.php?rsd">
    <link rel="wlwmanifest" type="application/wlwmanifest+xml"
        href="https://shoptalkshow.com/wp-includes/wlwmanifest.xml">
    <meta name="generator" content="WordPress 5.5.2">
    <style type="text/css">
        img#wpstats {
            display: none
        }
    </style>
    <style type="text/css">
        /* If html does not have either class, do not show lazy loaded images. */
        html:not(.jetpack-lazy-images-js-enabled):not(.js) .jetpack-lazy-image {
            display: none;
        }
    </style>
    <script>
        document.documentElement.classList.add(
            'jetpack-lazy-images-js-enabled'
        );
    </script>

    <script>
        var _gaq = _gaq || [];
        _gaq.push(['_setAccount', 'UA-2419836-8']);
        _gaq.push(['_trackPageview']);

        (function () {
            var ga = document.createElement('script');
            ga.type = 'text/javascript';
            ga.async = true;
            ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
            var s = document.getElementsByTagName('script')[0];
            s.parentNode.insertBefore(ga, s);
        })();
    </script>

</head>

<body class="home blog">

    <header class="site-header">

        <div class="logo-and-tagline">
            <h1><a href="https://alenandry.github.io">Alen's Blog</a></h1>
            <p>西电儿的个人博客</p>
        </div>

        <nav id="main-nav" class="main-nav mobile-is-closed">
            <button aria-expanded="false" id="menu-button" class="menu-button">Menu</button>
            <ul>
                <li class="main-nav-episodes"><a href="./rust.html">Rust开发</a></li>
                <li class="main-nav-series"><a href="./houduan.html">web后端开发</a></li>
                <li class="main-nav-advertising"><a href="./fontend.html">前端机器学习教程</a></li>
                <li class="main-nav-ask"><a href="./javascript.html">javascript数据结构</a></li>
                <li class="main-nav-topics"><a href="./python.html">python数据结构</a></li>
                <li class="main-nav-topics"><a href="./java.html">java数据结构</a></li>
                <li class="main-nav-ask"><a href="./vue.html">Vue开发</a></li>
                <li class="main-nav-ask"><a href="./react.html">React开发</a></li>
                <li class="main-nav-ask"><a href="./xiaochnegxu.html">小程序开发</a></li>

            </ul>
        </nav>
        <form role="search" method="get" id="searchform" class="searchform" action="./index.html">
            <div>
                <label for="s">Search for:</label>
                <input type="text" value="" name="s" id="s">
                <input type="submit" id="searchsubmit" value="Search">
            </div>
        </form>
    </header>
    <main class="post">
        <h2>使用 Python + Flask 搭建一个简单的网站</h2>
        
        <article>
            <h3>准备环境</h3>
            <div class="content">
                <span>
                    首先，你需要 python3，我使用的是 Ubuntu 18，所以系统已经自带了，如果你是其他的系统，请使用 Google 搜索如何安装 python3。
                    系统准备完毕了，就要准备软件了，请确保你的系统内已经安装了 pip3，如果没有，那么输入下面的代码安装:
                </span>
                <pre>
                    <code class="javascript">sudo apt-get install pip3</code>
                </pre>
                <p>安装完 pip3 后我们就要安装本文的核心程序 Flask 了，使用这串代码安装 Flask。</p>
                <pre>
                    <code class="javascript">pip3 install flask</code>
                </pre>
                一些简单的代码
                上一步完成后我们就已经安装好了 pip3 和 Flask，接下来让我们使用他们搭建一个简单的网站吧！
                
                在当前目录创建一个文件，使用以下命令:
                <pre>
                    <code class="python">nano web.py</code>

                </pre>
                
                nano编辑器会创建一个叫 web.py 的文件，将下面的代码粘贴进去。
                <pre>
<code class="python">
# -*- coding: utf-8 -*-
from flask import Flask
app=Flask(__name__)
@app.route('/')
def index():
    return 'hello world'
if __name__=="__main__":
    app.run(host="0.0.0.0",port=33333)
</code>
                </pre>
                

                <p>按 ctrl+x，再按 Y 保存。 我们来简单了解一下这串代码的构成:</p>
                <span>
                第一行是标记我们的代码以utf-8编码格式编写。
                第二行是从Flask 引入flask
                第三行是这个应用的名称
                第四行是一个装饰器，当flask收到和其参数相同的访问请求，将会执行它下面的代码
                def index(): 这就是被标准的函数，再往下就是返回体，你可以自定义
                再往下就是 app.run，可以定义端口与 ip。
                文件保存好后，时候输入 python3 web.py 如果一切正常，将会是如下输出。
                </span>
                <pre>
<code class="python">* Serving Flask app "web" (lazy loading)
* Environment: production
WARNING: This is a development server. Do not use it in a production deployment.
Use a production WSGI server instead.
* Debug mode: off
* Running on http://0.0.0.0:33333/ (Press CTRL+C to quit)
</code>
                </pre>
               

               <p> 这时候你打开你的服务器ip+端口号33333，正确的显示应该是这样：</p>
               <img src="./idex_files/images/py.png" alt="img">
                
                <p>恭喜你，你的第一个基于python+flask的网站就搭建完了！</p>

                
            </div>
        </article>
        
    </main>
    

    <footer class="site-footer">

        <div class="apply-typography">
            <p>
                Alen Andry 的博客
            </p>

            <a href="./index.html" class="twitter-follow-button">Blog</a>

            <a href="https://github.com/alenandry">Github</a>

            <a href="https://juejin.cn/user/3993068510655703">掘金链接</a>

            <a href="dnrops@outlook.com">联系邮箱：dnrops@outlook.com</a>
        </div>
    </footer>


        <script type="text/javascript" src="./idex_files/photon.min.js" id="jetpack-photon-js"></script>
        <script type="text/javascript" src="./idex_files/lazy-images.min.js" id="jetpack-lazy-images-js"></script>
        <script type="text/javascript" src="./idex_files/wp-embed.min.js" id="wp-embed-js"></script>
        <script type="text/javascript" src="./idex_files/e-202045.js" async="async" defer="defer"></script>
        <script type="text/javascript">
            _stq = window._stq || [];
            _stq.push(['view', { v: 'ext', j: '1:8.9.1', blog: '54408968', post: '0', tz: '-6', srv: 'shoptalkshow.com' }]);
            _stq.push(['clickTrackerInit', '54408968', '0']);
        </script>

        <script src="./idex_files/main.js"></script>
        <script src="./idex_files/code.js"></script>
        <script>hljs.highlightAll();</script>

</body>

</html>